<template>
  <div v-loading="listLoading" class="app-container">

    <div class="address-layout">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">今日总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.todayOverview.orderAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{dailyOverView.todayOverview.countOrder || 0}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{dailyOverView.todayOverview.countMember || 0}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.todayOverview.rebateAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.todayOverview.rechargeAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.todayOverview.withdrawAmount || 0)}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="4" class="overview-item-title">订单金额</el-col>
                <el-col :span="4" class="overview-item-title">订单数量</el-col>
                <el-col :span="4" class="overview-item-title">会员数量</el-col>
                <el-col :span="4" class="overview-item-title">佣金</el-col>
                <el-col :span="4" class="overview-item-title">充值</el-col>
                <el-col :span="4" class="overview-item-title">提现</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="out-border">
            <div class="layout-title">昨日总览</div>
            <div style="padding: 40px">
              <el-row>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.yesterdayOverview.orderAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{dailyOverView.yesterdayOverview.countOrder || 0}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{dailyOverView.yesterdayOverview.countMember || 0}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.yesterdayOverview.rebateAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.yesterdayOverview.rechargeAmount || 0)}}</el-col>
                <el-col :span="4" class="color-danger overview-item-value">{{formatAmount(dailyOverView.yesterdayOverview.withdrawAmount || 0)}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="4" class="overview-item-title">订单金额</el-col>
                <el-col :span="4" class="overview-item-title">订单数量</el-col>
                <el-col :span="4" class="overview-item-title">会员数量</el-col>
                <el-col :span="4" class="overview-item-title">佣金</el-col>
                <el-col :span="4" class="overview-item-title">充值</el-col>
                <el-col :span="4" class="overview-item-title">提现</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="overview-layout">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="out-border">
            <div class="layout-title">销售订单</div>
            <div class="color-main address-content">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.orderSummary.todaySummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.orderSummary.yesterdaySummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.orderSummary.currentMonthSummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.orderSummary.lastMonthSummary || 0)}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今天</el-col>
                <el-col :span="6" class="overview-item-title">昨天</el-col>
                <el-col :span="6" class="overview-item-title">本月</el-col>
                <el-col :span="6" class="overview-item-title">上月</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="out-border">
            <div class="layout-title">充值总览</div>
            <div class="color-main address-content">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.rechargeSummary.todaySummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.rechargeSummary.yesterdaySummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.rechargeSummary.currentMonthSummary || 0)}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{formatAmount(dailyOverView.rechargeSummary.lastMonthSummary || 0)}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今天</el-col>
                <el-col :span="6" class="overview-item-title">昨天</el-col>
                <el-col :span="6" class="overview-item-title">本月</el-col>
                <el-col :span="6" class="overview-item-title">上月</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="out-border">
            <div class="layout-title">注册新客</div>
            <div class="color-main address-content">
              <el-row>
                <el-col :span="6" class="color-danger overview-item-value">{{dailyOverView.registerSummary.todaySummary || 0}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{dailyOverView.registerSummary.yesterdaySummary || 0}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{dailyOverView.registerSummary.currentMonthSummary || 0}}</el-col>
                <el-col :span="6" class="color-danger overview-item-value">{{dailyOverView.registerSummary.lastMonthSummary || 0}}</el-col>
              </el-row>
              <el-row class="font-medium">
                <el-col :span="6" class="overview-item-title">今天</el-col>
                <el-col :span="6" class="overview-item-title">昨天</el-col>
                <el-col :span="6" class="overview-item-title">本月</el-col>
                <el-col :span="6" class="overview-item-title">上月</el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="total-layout">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="total-frame">
            <img :src="require('@/assets/images/home_orderAmount.png')" class="total-icon">
            <div class="total-title">订单总金额</div>
            <div class="total-value">{{formatAmount(dailyOverView.totalOverview.orderAmount || 0)}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="total-frame">
            <img :src="require('@/assets/images/home_countOrder.png')" class="total-icon">
            <div class="total-title">订单总数量</div>
            <div class="total-value">{{dailyOverView.totalOverview.countOrder || 0}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="total-frame">
            <img :src="require('@/assets/images/home_countMember.png')" class="total-icon">
            <div class="total-title">会员总数量</div>
            <div class="total-value">{{dailyOverView.totalOverview.countMember || 0}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="total-frame">
            <img :src="require('@/assets/images/home_rebateAmount.png')" class="total-icon">
            <div class="total-title">总佣金</div>
            <div class="total-value">{{formatAmount(dailyOverView.totalOverview.rebateAmount || 0)}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="total-frame">
            <img :src="require('@/assets/images/home_rechargeAmount.png')" class="total-icon">
            <div class="total-title">总充值</div>
            <div class="total-value">{{formatAmount(dailyOverView.totalOverview.rechargeAmount || 0)}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="total-frame">
            <!--<svg-icon icon-class="total-week" class="total-icon">
            </svg-icon>-->
            <img :src="require('@/assets/images/home_withdrawAmount.png')" class="total-icon">
            <div class="total-title">总提现</div>
            <div class="total-value">{{formatAmount(dailyOverView.totalOverview.withdrawAmount || 0)}}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="statistics-layout">
      <div class="layout-title">销售统计</div>
      <el-row>
        
        <el-col :span="24">
          <div style="padding: 10px; text-align: right;">
            <el-select @change="handleTypeChange"  v-model="dateType" placeholder="请选择" size="small" style="width: 100px;" >
              <el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-date-picker style="float: right; margin-left: 10px;z-index: 1" size="small" v-model="dateTimeSlot" type="daterange"
              align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
              @change="handleDateChange" :picker-options="pickerOptions">
            </el-date-picker>
            <div>
              <ve-line :data="chartData" :legend-visible="false" :loading="loading" :data-empty="dataEmpty" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    formatDate,
    shortcutsResult,
    dateRange,
  } from '@/utils/date';
  import { getStorage,setStorage,formatAmount } from "@/utils/index";
  import { getCommonEnums } from "@/api/commons";
  import { getReportSummaryData,getReportSummaryChart } from "@/api/home/index";

  export default {
    name: 'home',
    data() {
      return {
        pickerOptions: {
          shortcuts: shortcutsResult()
        },
        dateType: 3,
        dateTypeOptions: [
          { label: '年', value: 1 },
          { label: '月', value: 2 },
          { label: '日', value: 3 },
        ],
        dateTimeSlot: dateRange.getThisMonth(),
        chartSettings: {
          xAxisType: 'time',
          area: true,
          axisSite: {
            right: ['totalAmount']
          },
          labelMap: {
            'totalAmount': '总销售额',
            'goodsBaseMoney': '广告销售',
            'serviceBaseMoney': '服务销售',
            'cardPrice': '橙长卡额',
            'cardNum': '橙长卡数',
            'newCustomer': '有效新客'
          }
        },
        chartData: {
          columns: [],
          rows: []
        },
        dailyOverView: {
          todayOverview: {},
          yesterdayOverview: {},
          orderSummary: {},
          registerSummary: {},
          rechargeSummary: {}
        },
        loading: false,
        listLoading: false,
        dataEmpty: false
      }
    },
    created() {
      this.getReportSummary();
      this.getReportChart();
      this.getCommonEnums();
    },
    methods: {
      formatAmount,
      //获取汇总统计数据
      async getReportSummary(){ 
        const res = await getReportSummaryData();
        Object.keys(res.data).forEach(v=>{ 
          this.dailyOverView[v]=res.data[v] || {};
        })
      },
      //获取汇总统计数据
      async getReportChart(){ 
        let params={
          type:this.dateType,
        }
        if(this.dateTimeSlot&&this.dateTimeSlot.length){
          const startTime = this.dateTimeSlot[0].includes('-')?this.dateTimeSlot[0]:formatDate(this.dateTimeSlot[0], 'yyyy-MM-dd');
          const endTime = this.dateTimeSlot[1].includes('-')?this.dateTimeSlot[1]:formatDate(this.dateTimeSlot[1], 'yyyy-MM-dd');
          params.startTime=`${startTime} 00:00:00`;
          params.endTime=`${endTime} 23:59:59`;
        }
        const res = await getReportSummaryChart(params);
        const data = res.data || [];
        if(data.length){ 
          const columns=Object.keys(data[0]).map(v=>{return v;});
          this.chartData={
            columns,
            rows:data
          }
        }
      },
      //存储全局码值
      async getCommonEnums(){
        const commonEnums=getStorage('commonEnums') || false;
        if(commonEnums) return;
        const res = await getCommonEnums();
        setStorage('commonEnums',res.data);
      },

      //切换日期类型
      handleTypeChange(){
        this.getReportChart();
      },
      //切换日期选项
      handleDateChange(e) {
        this.dateSlot=e;
        this.getReportChart();
      },
      
      
     
    }
  }
</script>

<style scoped>
  .app-container {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .address-layout {
    border: #ffffff 1px solid;
  }

  .total-layout {
    margin-top: 20px;
  }

  .total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
  }

  .total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
  }

  .total-title {
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #909399;
    left: 6px;
    top: -40px;
  }

  .total-value {
    display: table;
    position: relative;
    font-size: 18px;
    color: #606266;
    left: 70px;
    top: -30px;
  }

  .un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
  }

  .un-handle-content {
    padding: 20px 40px;
  }

  .un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
  }

  .overview-layout {
    margin-top: 20px;
  }

  .overview-item-value {
    font-size: 24px;
    text-align: center;
  }

  .overview-item-title {
    margin-top: 10px;
    text-align: center;
  }

  .out-border {
    border: 1px solid #DCDFE6;
  }

  .statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
  }

  .address-content {
    padding: 20px;
    font-size: 18px
  }
</style>